<template>
    <el-dialog
    
    v-model="dialogVisible" title="仓库" 
    min-width="30%"
    draggable>

        <el-form>

            <el-form-item label="名称">
                <el-input size="large" :placeholder="'名称'" v-model="requestParam.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="所属门店">
                <el-button
                @click="goodsStoreSelect.open()"
                >
                    {{ goodsStore.name }}
                </el-button>
            </el-form-item>

            <el-form-item label="仓库负责人">
                <el-button
                :disabled="!requestParam.storeId"
                @click="empSelect.open(requestParam.storeId)"
                >
                    {{ empOfSelect.name }}
                    <span
                    v-if="!requestParam.storeId"
                    > - 请先选择门店</span>
                </el-button>

            </el-form-item>


            <el-form-item label="备注">
                <el-input size="large" :placeholder="'备注'" v-model="requestParam.remark" autocomplete="off"></el-input>
            </el-form-item>

            

        </el-form>

        <template v-slot:footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <GoodsStoreSelect ref="goodsStoreSelect" @select="selectGoodsStore" />
    <EmpSelect ref="empSelect" @select="selectEmp" />

</template>


<script lang="ts" setup>
import { ref,defineEmits,defineExpose, watch } from 'vue';
let dialogVisib, pale = ref(false);
import $kt from '@/vueKantboot';
import { ElLoading, ElMessage } from 'element-plus'
import { de, fa } from 'element-plus/es/locale';
import GoodsStoreSelect from '@/components/goodsStoreSelect/goodsStoreSelect.vue';
import EmpSelect from '@/components/empSelect/empSelect.vue';

let dialogVisible = ref(false);
let goodsStoreSelect = ref();
let empSelect = ref();

let goodsStore = ref({
    id: null,
    name: "未选门店",
});

let empOfSelect= ref({
    id: null,
    name: "未选员工",
});

// emits
let emits = defineEmits(['submit']);

let requestParamStart = {
    id: null,
    name: null,
    storeId: null,
    empIdOfManager: null,
    empOfManager:null,
    remark: null,
}

let requestParam = ref(

JSON.parse(JSON.stringify(requestParamStart))

);


let selectGoodsStore = (param: any) => {
    goodsStore.value = param;
    requestParam.value.storeId = param.id;    
}

let selectEmp = (param: any) => {
    empOfSelect.value = param;
    requestParam.value.empIdOfManager = param.id;    
}

/**
 * 打开弹窗
 */
let open = (param: any) => {
    if(param){
        requestParam.value = JSON.parse(JSON.stringify(param));
        goodsStore.value = requestParam.value.store;
        if(requestParam.value.empOfManager){
            empOfSelect.value = requestParam.value.empOfManager;
        }
    }    

    dialogVisible.value = true;
}


let fileClick = () => {
    document.getElementById('file')?.click();
}

let uploadFile = async (param: any) => {
    let file = param.target.files[0];
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    isFileUploading.value = true;

    // TODO: 上传图片
    const response = await $kt.request.upload({
        data: {
            file: file,
            groupCode: 'goodsType'
        },
    }).then((res: any) => {
        if (res.data.success) {
            ElMessage({
                message: '上传成功',
                type: 'success',
            })

            // 给图片id赋值
            requestParam.value.fileIdOfImg = res.data.data.id;
            isFileUploading.value = false;
            loading.close();
            return false;
        }
        isFileUploading.value = false;
        loading.close();
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });


    })



}



let submit = () => {

    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })

    $kt.request.request({
        url: '/business-goods-web/admin/goodsWarehouse/save',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })
            dialogVisible.value = false;

            loading.close();
            // 提交
            emits('submit');
            requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
            dialogVisible.value = false;
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
        loading.close();
    });

}

// 监听  requestParam.value.empIdOfManager 的变化
watch(() => requestParam.value.storeId, (newVal, oldVal) => {
    empOfSelect.value = {
        id: null,
        name: "未选员工",
    }
})


// 暴露给父组件的方法
defineExpose({
    open
})


</script>


<style lang="scss" scoped>
.img-uploaded {
    cursor: pointer;
}

.img-uploaded:hover {
    opacity: 0.8;
}
</style>